<template>
  <drawer-box :title="title" :ifShow="ifShow && showDrawerId === cf_id" @closeDrawer="closeDrawer">
    <div class="content self_scroll">
      <section class="time flex-between">
        <div class="startTime">
          <div class="timeTick">
            {{ getTime(cfDescData.cf_start_time, "HH:mm") }}
          </div>
          <div class="date">
            {{ getTime(cfDescData.cf_start_time, "yyyy-MM-DD") }}
          </div>
        </div>
        <div class="state" :class="stateData.stateClass">
          <span>{{ stateData.stateName }}</span>
        </div>
        <div class="endTime">
          <div class="timeTick">
            {{ getTime(cfDescData.cf_end_time, "HH:mm") }}
          </div>
          <div class="date">
            {{ getTime(cfDescData.cf_end_time, "yyyy-MM-DD") }}
          </div>
        </div>
      </section>
      <section class="flex-between">
        <span>主持人</span>
        <span>{{ cfDescData.cf_host_name }}</span>
      </section>
      <section class="flex-between">
        <span>会议号</span>
        <span>{{ cfDescData.cf_code }}</span>
      </section>
      <section class="members">
        <header>
          参会人（{{
            cfDescData.cf_participants ? cfDescData.cf_participants.length : 0
          }}）
        </header>
        <input
          type="text"
          placeholder="搜索"
          v-model="searchValue"
          @input="searchMember"
        />
        <ul class="memberList clearfix">
          <li
            class="flex-column flex-start"
            v-for="item in memberList"
            :key="item.id"
          >
            <div class="avatarBox">
              <div
                class="ifSponsor"
                v-show="cfDescData.cf_sponsor_id === item.id || cfDescData.cf_host === item.id"
              ></div>
              <avatar
                :imgID="
                  item.user_img_id
                "
                :id="item.id"
              ></avatar>
            </div>
            <div class="name">
              {{ item.remarks ? item.remarks : item.user_name }}
            </div>
          </li>
        </ul>
        <div
          class="open cp"
          v-if="cfMembers > 32 && !showClose"
          @click="openList"
        >
          展开全部({{ cfMembers.length }})
        </div>
        <div class="open cp" v-if="showClose" @click="closeList">收起</div>
      </section>
      <section class="flex-between">
        <span>会议文档</span>
        <span class="upload cp" @click="showfileDialog"
        >已上传{{
            cfDescData.cf_file_count ? cfDescData.cf_file_count : 0
          }}个文档</span
        >
      </section>
      <section class="flex-between" v-if="type === 'history'">
        <span>会议纪要</span>
        <span class="inputBtn cp" v-if="tools.isSelf(cfDescData.cf_host) && !cfRecord.length" @click="openSetCfRecord">
          请输入
          <img src="@/assets/conference/right.png" alt=""/>
        </span>
        <span class="recordBtn cp" v-if="cfRecord.length" @click="openSetCfRecord">
          <span class="singleWrap">{{ cfRecord }}</span>
          <img src="@/assets/conference/right.png" alt=""/>
        </span>
        <span class="inputBtn cp" v-if="!tools.isSelf(cfDescData.cf_host) && !cfRecord.length" @click="openSetCfRecord">
          暂无会议记录
          <img src="@/assets/conference/right.png" alt=""/>
        </span>
      </section>
    </div>
    <!-- 历史会议 -->
    <footer class="flex-start" v-if="type === 'history'">
      <div
        class="operate cp"
        @click="createGroup"
        v-if="tools.isSelf(cfDescData.cf_host)"
      >
        <div class="logoBox flex-center">
          <img src="@/assets/conference/groupChat.png" alt=""/>
        </div>
        <div class="name">创建群聊</div>
      </div>
      <div
        class="operate cp"
        @click="createCf"
        v-if="tools.isSelf(cfDescData.cf_host)"
      >
        <div class="logoBox flex-center">
          <img src="@/assets/conference/reCf.png" alt=""/>
        </div>
        <div class="name">再次发起</div>
      </div>
    </footer>
    <!-- 待办会议 -->
    <footer class="flex-start" v-else-if="type === 'agenda'">
      <div class="operate" @click="joinCf" :class="ifCanJoinCf ? 'cp' : 'na'">
        <div class="logoBox flex-center">
          <img
            :src="
              ifCanJoinCf
                ? require('@/assets/conference/reCf.png')
                : require('@/assets/conference/reCfGrey.png')
            "
            alt=""
          />
        </div>
        <div :class="{ name: true, grey: !ifCanJoinCf }">进入会议</div>
      </div>
      <div
        class="operate"
        v-if="tools.isSelf(cfDescData.cf_sponsor_id)"
        @click="editCf"
      >
        <div class="logoBox flex-center">
          <img src="@/assets/conference/edit.png" alt=""/>
        </div>
        <div class="name">编辑会议</div>
      </div>
      <!--      <div class="operate">-->
      <!--        <div class="logoBox flex-center">-->
      <!--          <img src="@/assets/conference/copyLink.png" alt=""/>-->
      <!--        </div>-->
      <!--        <div class="name">复制链接</div>-->
      <!--      </div>-->
      <div
        class="operate"
        v-if="tools.isSelf(cfDescData.cf_sponsor_id)"
        @click="cancelCf"
      >
        <div class="logoBox flex-center">
          <img src="@/assets/conference/delete.png" alt=""/>
        </div>
        <div class="name delete">取消会议</div>
      </div>
    </footer>
    <min-dialog-box
      v-if="cancelCfId"
      :dialogData="dialogData"
      @sureBtnEvent="sureBtnEvent"
      @cancelBtnEvent="cancelBtnEvent"
    ></min-dialog-box>
    <file-dialog
      :cf_id="this.cfDescData.cf_id"
      v-if="showfileBox"
      @closeMaxDialogBox="closeFileBox"
    ></file-dialog>
    <mid-dialog-box :title="'会议纪要'" v-show="type === 'history' && ifShowSetRecord" @closeMidDialog="closeSetCfRecord">
      <textarea placeholder="请输入会议记录" v-model="editRecord" v-if="tools.isSelf(cfDescData.cf_host)"></textarea>
      <div class="btn-blue cp" @click="setCfRecord" v-if="tools.isSelf(cfDescData.cf_host)">确定</div>
      <div class="btn-white-2 cp" @click="closeSetCfRecord" v-if="tools.isSelf(cfDescData.cf_host)">取消</div>
      <div class="cfRecord" v-if="!tools.isSelf(cfDescData.cf_host) && cfRecord.length">{{ cfRecord }}</div>
      <div class="empty" v-if="!tools.isSelf(cfDescData.cf_host) && !cfRecord.length">
        <img src="@/assets/common/empty.png" alt="" >
        <p>空空如也</p>
      </div>
    </mid-dialog-box>
  </drawer-box>
</template>

<script>
import moment from 'moment'
import { sendSock } from '@/utils/socketSend'

export default {
  props: {
    title: {
      require: String,
      default: ''
    },
    ifShow: {
      require: Boolean,
      default: false
    },
    cf_id: {
      require: Number
    },
    type: {
      require: String
    }
  },
  data () {
    return {
      showClose: false,
      showfileBox: false, // 展示文档框
      searchValue: '', // 查询关键词
      cfMembers: [], // 总列表
      memberList: [], // 成员列表
      setFlag: false,
      cancelCfId: null,
      // 是否显示编辑会议纪要的弹窗
      ifShowSetRecord: false,
      // 可编辑纪要
      editRecord: ''
    }
  },
  computed: {
    showDrawerId () { // 当前展示的抽屉id
      return this.$store.state.conference.agendaCfData.drawerId
    },
    cfDescData () {
      return this.$store.state.conference.cfDrawerData
    },
    // 历史会议 当前会议纪要
    cfRecord () {
      return this.$store.state.conference.cfRecord
    },
    userList () {
      return this.$store.state.chatInformation.userList
    },
    cfMembersIdList () {
      if (
        this.cfDescData.cf_participants &&
        this.cfDescData.cf_participants.length
      ) {
        return [...this.cfDescData.cf_participants.filter(item => item === this.cfDescData.cf_sponsor_id || item === this.cfDescData.cf_host), ...this.cfDescData.cf_participants.filter(item => item !== this.cfDescData.cf_sponsor_id && item !== this.cfDescData.cf_host)]
      } else {
        return []
      }
    },
    // 是否可以加入会议
    ifCanJoinCf () {
      return +new Date() - +new Date(this.cfDescData.cf_start_time) >= -900000
    },
    // 取消会议弹窗的dialogData
    dialogData () {
      return {
        mainTips: [`确定取消会议"${this.cfDescData.cf_name}"吗`],
        btnList: [
          {
            name: '确定',
            color: 'blue',
            type: 'sure'
          },
          {
            name: '取消',
            color: 'white',
            type: 'cancel'
          }
        ]
      }
    },
    // 会议状态
    stateData () {
      let className = ''
      let stateName = ''
      switch (this.cfDescData.cf_state) {
        case 0:
          className = 'before'
          stateName = '待开始'
          break
        case 1:
          className = 'meeting'
          stateName = '正在进行'
          break
        default:
          className = 'over'
          stateName = '已结束'
          break
      }
      return {
        stateClass: className,
        stateName
      }
    }
  },
  watch: {
    'userList.temp': { // 监听会议中非好友信息加载
      deep: true,
      handler (val) {
        if (val && this.cfMembersIdList.length && this.showDrawerId === this.cf_id) {
          // const timer = null
          const list = []
          this.cfMembersIdList.forEach(item => {
            if (this.userList[item]) {
              const newItem = this.userList[item]
              newItem.id = item
              if (this.tools.isSelf(item)) {
                list.unshift(newItem)
              } else {
                list.push(newItem)
              }
            }
          })
          if (list.length === this.cfMembersIdList.length && !this.setFlag) {
            this.cfMembers = [...list.filter(item => item.id === this.cfDescData.cf_sponsor_id || item.id === this.cfDescData.cf_host), ...list.filter(item => item.id !== this.cfDescData.cf_sponsor_id && item.id !== this.cfDescData.cf_host)]
            this.memberList = this.cfMembers.slice(0, 32)
            this.setFlag = true
          }

          // console.log(val)
          // if (val.length > 32) {
          //   this.memberList = val.slice(0, 32)
          // } else {
          //   this.memberList = val
          // }
        }
      }
    },
    cfMembersIdList: { // 切换会议详情监听
      deep: true,
      handler (val) {
        const list = []
        if (val.length && this.showDrawerId === this.cf_id) {
          val.forEach(item => {
            if (this.userList[item]) {
              const newItem = this.userList[item]
              newItem.id = item
              if (this.tools.isSelf(item)) {
                list.unshift(newItem)
              } else {
                list.push(newItem)
              }
            }
          })
          if (list.length === this.cfMembersIdList.length) {
            this.cfMembers = [...list.filter(item => item.id === this.cfDescData.cf_sponsor_id || item.id === this.cfDescData.cf_host), ...list.filter(item => item.id !== this.cfDescData.cf_sponsor_id && item.id !== this.cfDescData.cf_host)]
            this.memberList = this.cfMembers.slice(0, 32)
          }
        }
      }
    }
  },
  mounted () {
  },
  methods: {
    closeDrawer () {
      this.$emit('closeDrawer')
    },
    getTime (time, format) {
      return moment(time).format(format)
    },
    openList () {
      this.showClose = true
      this.memberList = this.cfMembers
    },
    closeList () {
      this.showClose = false
      this.memberList = this.cfMembers.slice(0, 32)
    },
    searchMember () {
      // 查询参会人
      this.memberList = this.cfMembers.filter(item => {
        if (item.remarks) {
          return (
            item.remarks.indexOf(this.searchValue) > -1 ||
            item.user_name.indexOf(this.searchValue) > -1
          )
        } else {
          return item.user_name.indexOf(this.searchValue) > -1
        }
      })
    },
    showfileDialog () {
      // 展示文档框
      this.showfileBox = true
    },
    closeFileBox () {
      this.showfileBox = false
    },
    // 编辑会议
    editCf () {
      this.$store
        .dispatch('conference/getCfDetail', this.cfDescData.cf_id)
        .then(res => {
          if (res.data && res.data.code === 200) {
            res.data.data.cf_start_time = moment(
              +new Date(res.data.data.cf_start_time) -
              new Date().getTimezoneOffset() * 60000
            ).format('YYYY-MM-DD HH:mm:ss')
            res.data.data.cf_end_time = moment(
              +new Date(res.data.data.cf_end_time) -
              new Date().getTimezoneOffset() * 60000
            ).format('YYYY-MM-DD HH:mm:ss')
            this.$store.commit('conference/set_agendaEditData', res.data.data)
            // this.$store.commit('conference/set_cfDrawerData', res.data.data)
          }
        })
      this.$router.push('/conference/agendaCf/edit')
    },
    // 创建群聊
    createGroup () {
      // 当人数大于等于三人才能创建群聊
      if (this.cfMembers.length > 2) {
        const cfMembers = this.cfMembers.map(item => {
          return {
            user_id: item
          }
        })
        this.$store.commit(
          'groups/set_selectedList',
          cfMembers.filter(item => !this.tools.isSelf(item.user_id))
        )
        this.$store.dispatch(
          'groups/createGroupChat',
          this.$store.state.user.userInfo.user_name + '的群聊'
        )
      } else {
        this.$message.info('当人数大于等于3人才能创建群聊')
      }
    },
    // 再次发起会议
    createCf () {
      const invites = this.cfMembers.filter(item => !this.tools.isSelf(item.id))
      // 建立快速会议
      this.$store
        .dispatch('conferenceRoom/createQuickConference', {
          cfName: this.cfDescData.cf_name
        })
        .then(res => {
          if (res.data && res.data.code === 200) {
            this.$store.commit('conferenceRoom/set_cf_type', 'conferenceRoom')
            // 定时器判断是否用户已经加入会议
            const timer = setInterval(() => {
              if (this.$store.state.conferenceRoom.cf_id) {
                if (invites.length) {
                  sendSock({
                    type: '4.1.6',
                    body: {
                      cf_id: this.$store.state.conferenceRoom.cf_id,
                      invite_ids: invites
                    }
                  })
                }
                clearInterval(timer)
              }
            }, 100)
          }
        })
    },
    // 加入会议
    joinCf () {
      if (this.ifCanJoinCf) {
        // 将当前设置继承给当前会议
        const settings = JSON.parse(
          JSON.stringify(this.$store.state.user.generalSettings)
        )
        this.$store.commit('conferenceRoom/set_conferenceSettings', settings)
        sendSock({
          type: '4.1.1',
          body: {
            voiced: settings.voiced,
            camera: settings.camera,
            cf_join_type: 1,
            cf_id: this.cfDescData.cf_code + ''
          }
        })
        this.$store.commit('socket/set_operationReqId', 'joinConferenceReqId')
      } else {
        this.$message.info('会议开始前15分钟方可入会')
      }
    },
    // 取消会议
    cancelCf () {
      this.cancelCfId = this.cfDescData.cf_id
    },
    // 确认取消会议
    sureBtnEvent () {
      this.$store.dispatch('conference/deleteCf', this.cancelCfId).then(res => {
        if (res.data && res.data.code === 200) {
          this.$store.dispatch('conference/getToDoMeetingList')
        } else {
          this.$message.error(res.data.message)
        }
      })
      this.cancelCfId = null
    },
    // 取消取消会议
    cancelBtnEvent () {
      this.cancelCfId = null
    },
    // 打开添加会议纪要弹窗
    openSetCfRecord () {
      this.ifShowSetRecord = true
      if (this.tools.isSelf(this.cfDescData.cf_host)) {
        this.editRecord = this.cfRecord
      }
    },
    // 关闭添加会议纪要弹窗
    closeSetCfRecord () {
      this.ifShowSetRecord = false
      if (this.tools.isSelf(this.cfDescData.cf_host)) {
        this.editRecord = ''
      }
    },
    // 确认编辑纪要
    setCfRecord () {
      this.$store.dispatch('conference/setCfRecord', {
        cfID: this.cf_id,
        cfMinutes: this.editRecord
      }).then(res => {
        if (res.data && res.data.code === 200) {
          this.$store.commit('conference/set_cfRecord', this.editRecord)
          this.closeSetCfRecord()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 0 20px;
  height: 930px;

  section {
    height: 61px;
    border-bottom: 1px solid #ebedf3;

    span {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      color: #2e3f64;
      line-height: 20px;
    }

    .upload {
      color: #304eec;
    }

    .inputBtn {
      color: #9eaac4;
      vertical-align: middle;

      img {
        width: 12px;
        height: 12px;
      }
    }

    .recordBtn {
      color: #1B2844;
      vertical-align: middle;

      span {
        display: inline-block;
        width: 252px;
        text-align: right;
        vertical-align: middle;
        margin-right: 16px;
      }

      img {
        vertical-align: middle;
        width: 12px;
        height: 12px;
      }
    }
  }

  section.time {
    height: 105px;
    padding: 0 40px;

    .startTime,
    .endTime {
      min-width: 107px;
    }

    .timeTick {
      height: 28px;
      font-size: 20px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #0D172C;
      line-height: 28px;
    }

    .date {
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: center;
      color: #9eaac4;
      line-height: 20px;
    }

    .state {
      width: 48px;
      height: 18px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      position: relative;

      span {
        border-radius: 4px;
        width: 96px;
        height: 36px;
        color: #ffffff;
        position: absolute;
        font-size: 20px;
        left: 50%;
        top: 50%;
        text-align: center;
        line-height: 36px;
        transform: translate(-50%, -50%) scale(0.5);
      }
    }

    .state.over {
      background: #9eaac4;
    }

    .state.meeting {
      background: #1ac47c;
    }

    .state.before {
      background: #ffb000;
    }
  }

  section.members {
    height: auto;
    padding-top: 5px;

    header {
      padding: 16px 0;
    }

    input {
      padding-left: 36px;
      width: 440px;
      height: 32px;
      background: #f6f7fb;
      border-radius: 2px;
      border: none;
      outline: none;
      margin-bottom: 16px;
    }

    ul.memberList {
      li {
        float: left;
        padding-bottom: 16px;
        margin-right: 16px;
        position: relative;

        .ifSponsor {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 34px;
          width: 12px;
          height: 12px;
          background-image: url("../../../assets/message/sponsor.png");
          background-size: 12px 12px;
          background-repeat: no-repeat;
        }

        .avatarBox {
          width: 40px;
          height: 40px;
        }

        .name {
          margin-top: 8px;
          height: 17px;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          color: #5f7196;
          line-height: 17px;
        }

        &:nth-child(8n) {
          margin-right: 0;
        }
      }
    }

    .open {
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-decoration: underline;
      text-align: center;
      color: #304eec;
      line-height: 20px;
      padding-bottom: 20px;
    }
  }
}

footer {
  padding: 10px 30px;

  .operate {
    margin-right: 30px;

    .logoBox {
      width: 40px;
      height: 40px;
      background: #f6f7fb;
      border-radius: 50%;
      margin: 0 auto;

      img {
        width: 24px;
        height: 24px;
      }
    }

    .name {
      margin-top: 7px;
      height: 17px;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      text-align: center;
      color: #304eec;
      line-height: 17px;
    }

    .grey {
      color: #9eaac4;
    }

    .name.delete {
      color: #ff3e6d;
    }
  }
}

.dialogBox {
  ::v-deep .box {
    .content {
      padding: 32px 24px 0;
      position: relative;

      textarea {
        width: 712px;
        height: 424px;
        border-color: #EBEDF3;
        padding: 20px;
      }

      .cfRecord {
      }

      .btn-blue {
        background: linear-gradient(316deg, #4a53ef, #6971fe 100%);
        position: absolute;
        left: 262px;
        bottom: 32px;
        margin-left: 0;
      }

      .btn-white-2 {
        position: absolute;
        bottom: 32px;
        right: 262px;
        margin-left: 0;
      }
      .empty {
        position: absolute;
        top: 120px;
        left: 50%;
        transform: translateX(-50%);
      }
      img {
        width: 160px;
        height: 160px;
      }
      p {
        color: #5F7196;
        font-size: 14px;
        text-align: center;
      }
    }
  }
}
</style>
